<template>
	<view class="content">
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">早上好！张三先生</text>
			<view class="box" style="position: absolute;right: 20px;">
				<image src="../static/消息.png" mode="" style="width: 30px;height: 30px;"></image>
			</view>
			<u-badge type="error" :count="77" :offset=[20,30] :is-center="false"></u-badge>
		</view>
		<view class="wrap">
			<u-swiper :height="400" :list="list1"></u-swiper>
		</view>
		<view class="anniu">
			<view class="one" v-for="(item,index) in list2" :key="index"> 
				<image :src="item.img" mode="" style="width: 40px;height: 40px;"></image>
				<text style="color: white;font-size: 12px; margin-top: 10px;">{{item.title}}</text>
			</view>
		</view>
		<view class="table">
			<view class="one2" v-for="(item,index) in list3" :key="index" @click="anniu(index)">
				<image :src="item.img" mode="" style="width: 40px;height: 40px;"></image>
				<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">{{item.title}}</text>
			</view>
			
		</view>
		<u-popup v-model="show" mode="center" border-radius="10" width="320px">
			<view
				style="width: 100%;height: 50px;background: rgb(39, 42, 57);line-height: 50px;font-size: 18px;color: green;display: flex;justify-content: center;">
				功能B</view>
			<view style="height: auto;" class="table">
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
				<view class="one3">
					<image src="../static/3.png" mode="" style="width: 40px;height: 40px;"></image>
					<text style="color: rgb(155, 155, 155);font-size: 12px; margin-top: 10px;">功能1</text>

				</view>
			</view>
		</u-popup>
		<u-tabbar v-model="current" :list="list" :mid-button="true" :before-switch="beforeSwitch"
			active-color="green"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3:[{
					img:require("../static/2.png"),
					title:"功能A",
				},
				{
					img:require("../static/2.png"),
					title:"功能B",
				},
				{
					img:require("../static/2.png"),
					title:"功能C",
				},
				{
					img:require("../static/2.png"),
					title:"功能D",
				},
				{
					img:require("../static/2.png"),
					title:"功能E",
				},
				{
					img:require("../static/2.png"),
					title:"功能F",
				},
				{
					img:require("../static/2.png"),
					title:"功能G",
				},
				{
					img:require("../static/2.png"),
					title:"功能H",
				},
				{
					img:require("../static/2.png"),
					title:"功能I",
				},
				{
					img:require("../static/2.png"),
					title:"功能J",
				},
				],
				list2:[{
					img:require("../static/1.png"),
					title:"功能1",
				},
				{
					img:require("../static/1.png"),
					title:"功能2",
				},
				{
					img:require("../static/1.png"),
					title:"功能3",
				},
				{
					img:require("../static/1.png"),
					title:"功能4",
				},
				{
					img:require("../static/1.png"),
					title:"功能5",
				},
				],
				show: false,
				list1: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '工作',
						count: "",
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '助手',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '常用',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '分析',
						customIcon: false,
					}, {
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我',
						count: "",
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
			}
		},

		onLoad: function() {

		},
		created() {

		},
		computed: {

		},
		methods: {
			anniu(index) {
				console.log(index)
				if(index==1){
				this.show = true;
				}
			},
			beforeSwitch(index){
			 console.log(index)
			 this.current=index
			 if(index!=0){
			this.$modal.showToast('模块建设中~')
			 }
			}
		}
	}
</script>

<style>
	.badge {
		background-color: blue;
		color: white;
	}

	.anniu {
		width: 100%;
		height: 110px;
		background-color: rgb(39, 42, 57);
		display: flex;
	}

	.one {
		width: 20%;
		height: 100%;
		/* border:1px solid red; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.table {
		width: 100%;
		height: auto;
		background: rgb(255, 255, 255);
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.one2 {
		width: 25%;
		height: 100px;
		border: 1px solid rgb(245, 245, 245);

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.one3 {
		width: 80px;
		height: 100px;
		/* border:1px solid rgb(245, 245, 245); */

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		/* padding: 10px; */
		background: rgb(39, 42, 57);
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		color: green;
	}

	.mui-action-menu {
		display: none !important;
	}

	.wrap {
		width: 100%;

	}
</style>